تابع repeat در گرید CSS: تولید داینامیک ترک‌ها

گرید CSS انقلابی در طرح‌بندی وب ایجاد کرده و کنترل و انعطاف‌پذیری بی‌نظیری را ارائه می‌دهد. در میان ویژگی‌های قدرتمند آن، تابع ()repeat به عنوان یک ابزار حیاتی برای ایجاد ساختارهای گرید داینامیک و واکنش‌گرا برجسته است. این تابع به شما اجازه می‌دهد تا الگوهای تکرارشونده ترک‌های گرید را به طور کارآمد تعریف کنید، که به طور قابل توجهی CSS شما را ساده کرده و طرح‌بندی‌های شما را با اندازه‌های مختلف صفحه و حجم محتوا سازگارتر می‌کند. این راهنمای جامع تابع ()repeat را به تفصیل بررسی کرده و سینتکس، موارد استفاده و تکنیک‌های پیشرفته آن را پوشش می‌دهد.

درک مبانی گرید CSS

قبل از پرداختن به تابع ()repeat، بیایید به طور خلاصه مفاهیم اساسی گرید CSS را مرور کنیم. یک طرح‌بندی گرید CSS شامل موارد زیر است:

• کانتینر گرید (Grid Container): عنصر والد که طرح‌بندی گرید روی آن اعمال می‌شود (display: grid; یا display: inline-grid;).
• آیتم‌های گرید (Grid Items): فرزندان مستقیم کانتینر گرید که به طور خودکار در گرید قرار می‌گیرند.
• ترک‌های گرید (Grid Tracks): سطرها و ستون‌هایی که گرید را تشکیل می‌دهند.
• خطوط گرید (Grid Lines): خطوط افقی و عمودی که مرزهای ترک‌های گرید را تعریف می‌کنند.
• سلول‌های گرید (Grid Cells): واحدهای مجزا درون گرید که از تقاطع سطرها و ستون‌های گرید تشکیل می‌شوند.
• نواحی گرید (Grid Areas): یک یا چند سلول گرید که می‌توانند نام‌گذاری شده و برای موقعیت‌دهی آیتم‌های گرید استفاده شوند.

ویژگی‌های grid-template-columns و grid-template-rows اندازه و تعداد ترک‌های گرید را تعریف می‌کنند. برای مثال:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

این کد یک گرید با سه ستون با عرض برابر (با استفاده از واحد fr که کسری از فضای موجود را نشان می‌دهد) و دو سطر با ارتفاع تعیین‌شده خودکار ایجاد می‌کند.

معرفی تابع ()repeat

تابع ()repeat یک روش کوتاه برای تعریف یک الگوی تکراری از ترک‌های گرید است. این تابع دو آرگومان می‌گیرد:

1. تعداد تکرارها: چند بار الگوی ترک باید تکرار شود. این می‌تواند یک عدد ثابت یا کلمات کلیدی مانند auto-fit و auto-fill باشد.
2. لیست ترک‌ها: یک لیست جدا شده با فاصله از اندازه‌های ترک، که می‌تواند شامل هر واحد معتبر CSS باشد (مانند px، em، fr، auto).

سینتکس اصلی به این صورت است:

            repeat( <number-of-repetitions> , <track-list> );
            

              
                Copy
              
            
          

برای مثال، کد زیر یک گرید با چهار ستون ایجاد می‌کند که هر کدام 100 پیکسل عرض دارند:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

            

              
                Copy
              
            
          

این معادل است با:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

            

              
                Copy
              
            
          

تابع ()repeat به ویژه هنگام کار با الگوهای پیچیده‌تر یا زمانی که نیاز به تنظیم داینامیک تعداد ترک‌ها بر اساس اندازه صفحه یا محتوا دارید، بسیار ارزشمند می‌شود.

مثال‌های ساده از کاربرد ()repeat

بیایید چند مثال ساده را برای نشان دادن تطبیق‌پذیری تابع ()repeat بررسی کنیم.

ستون‌های مساوی

برای ایجاد یک گرید با تعداد مشخصی از ستون‌های با عرض برابر، می‌توانید از واحد fr استفاده کنید:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

این کد سه ستون ایجاد می‌کند که هر کدام یک‌سوم فضای موجود را اشغال می‌کنند.

اندازه‌های ستون متناوب

شما همچنین می‌توانید الگوهای تکراری با اندازه‌های مختلف ستون تعریف کنید:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
}

            

              
                Copy
              
            
          

این کد یک گرید با چهار ستون ایجاد می‌کند. الگوی 1fr 2fr دو بار تکرار می‌شود و در نتیجه ستون‌هایی با عرض‌های 1fr، 2fr، 1fr و 2fr به ترتیب ایجاد می‌شوند.

ستون‌های ثابت و انعطاف‌پذیر

شما می‌توانید ستون‌های با عرض ثابت را با ستون‌های انعطاف‌پذیر با استفاده از ()repeat ترکیب کنید:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr) 100px;
}

            

              
                Copy
              
            
          

این کد یک گرید با چهار ستون ایجاد می‌کند. ستون‌های اول و آخر با عرض ثابت 100 پیکسل هستند، در حالی که دو ستون میانی فضای باقی‌مانده را به طور مساوی تقسیم می‌کنند.

تکنیک‌های پیشرفته با auto-fit و auto-fill

قدرت واقعی تابع ()repeat در توانایی آن برای ایجاد طرح‌بندی‌های داینامیک و واکنش‌گرا با استفاده از کلمات کلیدی auto-fit و auto-fill نهفته است. این کلمات کلیدی به گرید اجازه می‌دهند تا به طور خودکار تعداد ترک‌ها را بر اساس فضای موجود و اندازه آیتم‌های گرید تنظیم کند.

درک auto-fit و auto-fill

هر دو auto-fit و auto-fill قصد دارند فضای موجود را با بیشترین تعداد ممکن از ترک‌ها پر کنند. تفاوت اصلی در نحوه مدیریت ترک‌های خالی است:

• auto-fill: سطر را با هر تعداد ستونی که جا می‌شود پر می‌کند. اگر به دلیل کمبود آیتم‌های گرید، ستون‌های خالی وجود داشته باشد، فضا را به همان صورت باقی می‌گذارد. مرورگر ممکن است ستون‌های خالی را به انتها اضافه کند. این ترک‌های خالی همچنان فضا اشغال می‌کنند.
• auto-fit: مانند auto-fill عمل می‌کند، اما وقتی همه آیتم‌های گرید قرار گرفتند، ترک‌های خالی را جمع می‌کند (collapse). این بدان معناست که ترک‌های باقی‌مانده برای پر کردن فضای موجود گسترش می‌یابند.

در اصل، auto-fit ترک‌های خالی را به 0 پیکسل کاهش می‌دهد، در حالی که auto-fill اندازه ترک تعریف‌شده را حتی اگر خالی باشند، حفظ می‌کند. پیامدهای عملی به نیازهای خاص طرح‌بندی شما بستگی دارد.

استفاده از auto-fit برای ستون‌های واکنش‌گرا

کلمه کلیدی auto-fit برای ایجاد طرح‌بندی‌های ستونی واکنش‌گرا که با اندازه‌های مختلف صفحه سازگار می‌شوند، ایده‌آل است. مثال زیر را در نظر بگیرید:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

            

              
                Copy
              
            
          

این کد گریدی ایجاد می‌کند که به طور خودکار تعداد ستون‌ها را بر اساس فضای موجود تنظیم می‌کند. نحوه کار آن به این صورت است:

• auto-fit: به گرید می‌گوید تا جایی که ممکن است ستون جا دهد.
• minmax(250px, 1fr): حداقل و حداکثر اندازه هر ستون را تعریف می‌کند. هر ستون حداقل 250 پیکسل عرض خواهد داشت، اما می‌تواند برای پر کردن فضای موجود (تا 1fr) گسترش یابد.
• grid-gap: 20px: یک فاصله 20 پیکسلی بین آیتم‌های گرید اضافه می‌کند.

با تغییر اندازه صفحه، گرید به طور خودکار تعداد ستون‌ها را تنظیم می‌کند تا اطمینان حاصل شود که هر ستون حداقل 250 پیکسل عرض دارد. اگر صفحه به اندازه کافی عریض باشد، ستون‌ها برای پر کردن فضای موجود گسترش می‌یابند. اگر صفحه برای جا دادن حتی یک ستون هم خیلی باریک باشد، محتوا سرریز خواهد شد.

سناریوی مثال: یک گالری تصاویر را تصور کنید. با استفاده از این رویکرد، گالری به طور واکنش‌گرا تعداد تصاویر نمایش داده شده در هر سطر را تنظیم می‌کند و تجربه مشاهده بهینه‌ای را در دستگاه‌های مختلف فراهم می‌کند.

استفاده از auto-fill برای محتوای داینامیک

کلمه کلیدی auto-fill زمانی مفید است که می‌خواهید یک ساختار گرید ثابت را حفظ کنید، حتی اگر ترک‌های خالی وجود داشته باشد. این می‌تواند برای ایجاد طرح‌بندی‌هایی که در آینده انتظار افزودن محتوای بیشتری را دارید، مفید باشد. در اینجا یک مثال آورده شده است:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

در این حالت، گرید تا جایی که ممکن است ستون ایجاد می‌کند که هر کدام حداقل 200 پیکسل عرض دارند. اگر آیتم‌های گرید کافی برای پر کردن تمام ستون‌ها وجود نداشته باشد، ستون‌های باقی‌مانده خالی می‌مانند و ساختار کلی گرید را حفظ می‌کنند. در حالی که خالی هستند، آنها همچنان عرض تعریف‌شده در `minmax` را اشغال می‌کنند که تفاوت کلیدی بین `auto-fit` و `auto-fill` است.

سناریوی مثال: یک داشبورد با تعداد ثابتی از ویجت‌های جایگزین را در نظر بگیرید. استفاده از auto-fill تضمین می‌کند که داشبورد یک طرح‌بندی ثابت را حفظ می‌کند، حتی اگر برخی از ویجت‌ها به طور موقت خالی یا غیرقابل دسترس باشند.

انتخاب بین auto-fit و auto-fill

انتخاب بین auto-fit و auto-fill به اهداف طراحی خاص شما بستگی دارد. در اینجا خلاصه‌ای برای کمک به تصمیم‌گیری شما آورده شده است:

• از auto-fit استفاده کنید زمانی که: می‌خواهید گرید به طور خودکار تعداد ستون‌ها را بر اساس محتوای موجود و اندازه صفحه تنظیم کند و می‌خواهید ترک‌های خالی جمع شوند. این برای طرح‌بندی‌های واکنش‌گرا که می‌خواهید از فضای موجود حداکثر استفاده را ببرید، ایده‌آل است.
• از auto-fill استفاده کنید زمانی که: می‌خواهید یک ساختار گرید ثابت را حفظ کنید، حتی اگر ترک‌های خالی وجود داشته باشد. این برای طرح‌بندی‌هایی که انتظار افزودن محتوای بیشتر در آینده را دارید یا می‌خواهید طرح کلی گرید را حفظ کنید، حتی اگر برخی از آیتم‌ها وجود نداشته باشند، مفید است.

ترکیب ()repeat با سایر ویژگی‌های گرید CSS

تابع ()repeat را می‌توان با سایر ویژگی‌های گرید CSS ترکیب کرد تا طرح‌بندی‌های حتی پیچیده‌تری ایجاد شود. در اینجا چند مثال آورده شده است:

استفاده از grid-template-areas با ()repeat

در حالی که کاربرد اصلی `repeat()` در `grid-template-columns` و `grid-template-rows` است، ماهیت داینامیک آن می‌تواند به طور غیرمستقیم بر طرح‌بندی‌های تعریف‌شده با استفاده از `grid-template-areas` تأثیر بگذارد. به عنوان مثال، اگر تعداد ستون‌ها به صورت داینامیک با `(...)repeat(auto-fit,` تغییر کند، آرایش آیتم‌های تعریف‌شده در `grid-template-areas` بر این اساس تطبیق می‌یابد.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 10px;
}

.header { grid-area: header; background-color: #eee; }
.nav { grid-area: nav; background-color: #ddd; }
.main { grid-area: main; background-color: #ccc; }
.aside { grid-area: aside; background-color: #bbb; }
.footer { grid-area: footer; background-color: #aaa; }

            

              
                Copy
              
            
          

در این مثال، اگرچه `grid-template-columns` به صورت داینامیک بر اساس اندازه صفحه تنظیم می‌شود، ساختار اصلی طرح‌بندی تعریف‌شده توسط `grid-template-areas` (هدر، نوار ناوبری، اصلی، کناری، فوتر) ثابت باقی می‌ماند. نواحی `nav`، `main` و `aside` به طور خودکار عرض خود را با تغییر تعداد ستون‌ها تنظیم می‌کنند.

استفاده از ()minmax درون ()repeat برای ترک‌های انعطاف‌پذیر

تابع ()minmax به شما اجازه می‌دهد تا یک اندازه حداقل و حداکثر برای یک ترک گرید تعریف کنید. این به ویژه در ترکیب با ()repeat برای ایجاد طرح‌بندی‌های انعطاف‌پذیر و واکنش‌گرا مفید است. ما قبلاً از این در مثال‌های قبلی استفاده کرده‌ایم.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

این کد یک گرید با ستون‌هایی ایجاد می‌کند که حداقل 200 پیکسل عرض دارند اما می‌توانند برای پر کردن فضای موجود گسترش یابند. این تضمین می‌کند که محتوا در صفحات کوچک‌تر خوانا باقی می‌ماند و در عین حال از فضای موجود در صفحات بزرگ‌تر بهره می‌برد.

ترکیب ()repeat با Media Queries

شما می‌توانید از مدیا کوئری‌ها برای تنظیم تعداد ستون‌ها یا اندازه‌های ترک بر اساس اندازه صفحه استفاده کنید. این به شما امکان می‌دهد طرح‌بندی‌هایی ایجاد کنید که برای دستگاه‌های مختلف بهینه شده‌اند. برای مثال:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Default for small screens */
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Larger screens */
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Even larger screens */
  }
}

            

              
                Copy
              
            
          

این کد پیکربندی‌های مختلف ستون را برای صفحات کوچک، متوسط و بزرگ تعریف می‌کند. در صفحات کوچک، ستون‌ها حداقل 150 پیکسل عرض خواهند داشت. در صفحات متوسط، حداقل 250 پیکسل و در صفحات بزرگ، حداقل 300 پیکسل عرض خواهند داشت.

موارد استفاده و مثال‌های واقعی

تابع ()repeat ابزاری قدرتمند برای ایجاد انواع طرح‌بندی‌ها است. در اینجا چند مورد استفاده و مثال واقعی آورده شده است:

گالری تصاویر

همانطور که قبلاً نشان داده شد، یک گالری تصاویر می‌تواند از استفاده از ((...))repeat(auto-fit, minmax بهره زیادی ببرد. این به گالری اجازه می‌دهد تا به طور واکنش‌گرا تعداد تصاویر نمایش داده شده در هر سطر را تنظیم کند و یک ارائه ثابت و جذاب بصری را در دستگاه‌های مختلف تضمین کند.

لیست محصولات

یک وب‌سایت تجارت الکترونیک می‌تواند از ()repeat برای ایجاد یک گرید لیست محصولات داینامیک استفاده کند. تعداد محصولات نمایش داده شده در هر سطر را می‌توان بر اساس اندازه صفحه تنظیم کرد و تجربه خرید بهینه‌ای را برای کاربران در دسکتاپ، تبلت و گوشی‌های هوشمند فراهم کرد.

لیست پست‌های وبلاگ

یک وبلاگ می‌تواند از ()repeat برای ایجاد یک طرح‌بندی انعطاف‌پذیر برای نمایش پیش‌نمایش پست‌های وبلاگ استفاده کند. تعداد پست‌های نمایش داده شده در هر سطر را می‌توان بر اساس اندازه صفحه تنظیم کرد و اطمینان حاصل کرد که محتوا به راحتی در دستگاه‌های مختلف قابل دسترسی و خواندن است.

طرح‌بندی داشبورد

یک داشبورد می‌تواند از ()repeat برای ایجاد یک طرح‌بندی داینامیک برای نمایش ویجت‌ها استفاده کند. تعداد ویجت‌های نمایش داده شده در هر سطر را می‌توان بر اساس اندازه صفحه تنظیم کرد و یک نمای کلی بهینه از معیارهای کلیدی و داده‌ها را فراهم کرد.

بهترین شیوه‌ها برای استفاده از تابع ()repeat

برای اطمینان از اینکه از تابع ()repeat به طور مؤثر استفاده می‌کنید، بهترین شیوه‌های زیر را در نظر بگیرید:

• استفاده از ()minmax برای ترک‌های انعطاف‌پذیر: تابع ()minmax به شما اجازه می‌دهد تا یک اندازه حداقل و حداکثر برای یک ترک گرید تعریف کنید و تعادلی بین انعطاف‌پذیری و کنترل ایجاد کنید.
• auto-fit و auto-fill را با دقت در نظر بگیرید: کلمه کلیدی مناسب را بر اساس نیازهای خاص طرح‌بندی خود انتخاب کنید. auto-fit برای طرح‌بندی‌های واکنش‌گرا که می‌خواهید از فضای موجود حداکثر استفاده را ببرید، ایده‌آل است، در حالی که auto-fill برای حفظ یک ساختار گرید ثابت مفید است.
• استفاده از مدیا کوئری‌ها برای تنظیمات خاص دستگاه: مدیا کوئری‌ها به شما امکان می‌دهند تعداد ستون‌ها یا اندازه‌های ترک را بر اساس اندازه صفحه تنظیم کنید و طرح‌بندی را برای دستگاه‌های مختلف بهینه کنید.
• طرح‌بندی‌های خود را در دستگاه‌های مختلف آزمایش کنید: همیشه طرح‌بندی‌های خود را در دستگاه‌های مختلف آزمایش کنید تا اطمینان حاصل کنید که واکنش‌گرا و از نظر بصری جذاب هستند.
• ارائه جایگزین برای مرورگرهای قدیمی: در حالی که گرید CSS به طور گسترده پشتیبانی می‌شود، برخی از مرورگرهای قدیمی ممکن است به طور کامل از تابع ()repeat پشتیبانی نکنند. ارائه یک راه‌حل جایگزین برای این مرورگرها، مانند استفاده از float یا سایر تکنیک‌های طرح‌بندی را در نظر بگیرید.

ملاحظات دسترسی‌پذیری

در حالی که گرید CSS عمدتاً بر روی طرح‌بندی بصری تمرکز دارد، در نظر گرفتن دسترسی‌پذیری هنگام پیاده‌سازی طرح‌بندی‌های گرید بسیار مهم است. در اینجا چند نکته کلیدی وجود دارد:

• ترتیب منطقی منبع (Source Order): اطمینان حاصل کنید که ترتیب منبع محتوای شما حتی بدون CSS منطقی باشد. صفحه‌خوان‌ها و کاربرانی که CSS را غیرفعال می‌کنند به ترتیب منبع HTML تکیه می‌کنند. از گرید CSS برای بازآرایی بصری عناصر استفاده کنید، اما ترتیب منطقی منبع را فدا نکنید.
• ناوبری با صفحه‌کلید: بررسی کنید که ناوبری با صفحه‌کلید همانطور که انتظار می‌رود کار می‌کند. گرید CSS به خودی خود بر ناوبری با صفحه‌کلید تأثیر نمی‌گذارد، اما طرح‌بندی‌های پیچیده گاهی اوقات می‌توانند مشکلات ناوبری ایجاد کنند. به طور کامل با کلید Tab آزمایش کنید.
• HTML معنایی (Semantic HTML): از عناصر HTML معنایی به طور مناسب استفاده کنید. به عنوان مثال، از <nav> برای منوهای ناوبری، <article> برای مقالات و غیره استفاده کنید. این به صفحه‌خوان‌ها کمک می‌کند تا ساختار و هدف محتوای شما را درک کنند.
• کنتراست کافی: از کنتراست رنگ کافی بین متن و رنگ‌های پس‌زمینه اطمینان حاصل کنید. این به ویژه برای کاربران با دید کم مهم است.
• طراحی واکنش‌گرا: یک طرح‌بندی گرید واکنش‌گرا که با اندازه‌های مختلف صفحه و سطوح بزرگنمایی سازگار است، دسترسی‌پذیری را برای کاربران با نیازهای مختلف بهبود می‌بخشد.

عیب‌یابی مشکلات رایج

هنگام کار با گرید CSS و تابع ()repeat، ممکن است با برخی مشکلات رایج مواجه شوید. در اینجا چند نکته عیب‌یابی آورده شده است:

• آیتم‌های گرید فضا را پر نمی‌کنند: اگر آیتم‌های گرید شما فضای موجود را پر نمی‌کنند، ویژگی‌های grid-template-columns و grid-template-rows را بررسی کنید. مطمئن شوید که از واحدهای مناسب (مانند fr، %، auto) استفاده می‌کنید و اندازه‌های ترک به درستی تعریف شده‌اند.
• ستون‌ها به درستی شکسته نمی‌شوند (Wrapping): اگر ستون‌های شما به درستی شکسته نمی‌شوند، تابع ()minmax و کلمات کلیدی auto-fit یا auto-fill را دوباره بررسی کنید. مطمئن شوید که حداقل عرض ستون برای محتوا مناسب است و گرید قادر به تنظیم تعداد ستون‌ها بر اساس فضای موجود است.
• فاصله‌ها (Gaps) به درستی نمایش داده نمی‌شوند: اگر فاصله‌های شما به درستی نمایش داده نمی‌شوند، اطمینان حاصل کنید که از ویژگی grid-gap (یا ویژگی‌های جداگانه grid-column-gap و grid-row-gap) در کانتینر گرید استفاده می‌کنید. همچنین، هرگونه استایل متناقض که ممکن است تنظیمات فاصله را بازنویسی کند، بررسی کنید.
• رفتار غیرمنتظره طرح‌بندی در مرورگرهای مختلف: در حالی که گرید CSS پشتیبانی خوبی در مرورگرها دارد، ممکن است تفاوت‌های جزئی در نحوه رندر طرح‌بندی‌های گرید توسط مرورگرهای مختلف وجود داشته باشد. طرح‌بندی‌های خود را در چندین مرورگر آزمایش کنید تا هرگونه مشکل سازگاری را شناسایی و برطرف کنید.

نتیجه‌گیری

تابع ()repeat در گرید CSS ابزاری قدرتمند برای ایجاد طرح‌بندی‌های وب داینامیک و واکنش‌گرا است. با درک سینتکس و قابلیت‌های آن، می‌توانید به طور قابل توجهی CSS خود را ساده کرده و طرح‌بندی‌هایی ایجاد کنید که با اندازه‌های مختلف صفحه و حجم محتوا سازگار باشند. چه در حال ساخت یک گالری تصاویر، یک لیست محصولات یا یک داشبورد پیچیده باشید، تابع ()repeat می‌تواند به شما در ایجاد طرح‌بندی‌های انعطاف‌پذیر و جذاب بصری که تجربه کاربری را بهبود می‌بخشد، کمک کند.

تسلط بر تابع ()repeat، به ویژه استفاده از auto-fit و auto-fill، برای توسعه وب مدرن ضروری است. این به شما امکان می‌دهد طرح‌بندی‌هایی ایجاد کنید که نه تنها از نظر بصری جذاب هستند، بلکه قابل تطبیق و نگهداری نیز می‌باشند. قدرت گرید CSS و تابع ()repeat را برای باز کردن امکانات جدید در طراحی وب به کار بگیرید.

یادگیری بیشتر و منابع

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
• CSS-Tricks: https://css-tricks.com/almanac/functions/repeat/
• Grid by Example: https://gridbyexample.com/